<template>
    <div>
        <!-- 遍历商品列表 -->

					<div v-for="item in datalist" class="col-sm-6 col-md-3 col-product">
						<figure>
							<a :href="'/item?id='+item.id"><img class="rounded-corners img-fluid" :src="'http://localhost:8000/static/upload/'+item.img+''"	width="240" height="240">
							</a>
							<figcaption>
								<div class="thumb-overlay"><a :href="'/item?id='+item.id" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'/item?id='+item.id">{{ item.name }}</a></h4>


						<p><span class="emphasis">${{ item.price }}</span></p>
					</div>
                    <!--heyui分页-->
                    <br><br>
					<div>

						<Pagination v-model="pagination" @change="change" layout="pager,jumper" small ></Pagination>
						
					</div>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
        
        //分页器变量
        pagination:{
        page:1,
        size:3,
        total:5
        },
        //商品列表
        datalist:[],
            
        }
    },
    methods: {
        
      //分页器事件
  	change:function(){
  		//发送请求
      this.axios.get('http://localhost:8000/goodslist2/',{params:{page:this.pagination.page,size:this.pagination.size}}).then((result) =>{

              console.log(result);
              this.datalist = result.data.data;

      });

  	},
        
    },
    mounted() {
        //请求商品接口
  	//发送请求
      this.axios.get('http://localhost:8000/goodslist2/',{params:{page:1,size:3}}).then((result) =>{

              console.log(result);
			  this.datalist = result.data.data;
			  this.pagination.total = result.data.total;

	  });
        
    },
}
</script>

<style>
    
</style>